<template>
	<view class="transaction_password">
		<Header leftPathType="navigateTo" leftPath="/pages/safety_center/safety_center" :title="$t('mine.transaction.password')"/>
		<view class="login_password_content_warp">
			<view class="form_content_item">
				<view class="form_content_item_title">{{$t('mine.safety.center.transaction.password')}}</view>
				<up-input
				    :placeholder="$t('mine.transaction.password.placeholder')"
				    border="surround"
				    v-model="form.password"
					:customStyle="inputCss"
					:type="passwordIsShow ?'text':'password'"
				  >
					  <template #suffix style="margin-right: 10rpx;">
						<up-image v-if="passwordIsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="passwordIsShow=false;"></up-image>
						<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="passwordIsShow=true;"></up-image>
					  </template>
				  </up-input>
			</view>
			<view class="form_content_item">
				<view class="form_content_item_title">{{$t('mine.transaction.password.ok')}}</view>
				<up-input
				    :placeholder="$t('mine.transaction.password.placeholder')"
				    border="surround"
				    v-model="form.password2"
					:customStyle="inputCss"
					:type="password2IsShow ?'text':'password'"
				  >
					<template #suffix style="margin-right: 10rpx;">
						<up-image v-if="password2IsShow" src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="password2IsShow=false;"></up-image>
						<up-image v-else src="/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="password2IsShow=true;"></up-image>
					</template>
				  </up-input>
			</view>
			<view class="note_warp">
				<view class="note_item">
					<view class="note_item_y"></view>
					<view class="note_item_value">{{$t('register.step3.content.msg1')}}</view>
				</view>
				<view class="note_item">
					<view class="note_item_y"></view>
					<view class="note_item_value">{{$t('register.step3.content.msg2')}}</view>
				</view>
				<view class="note_item">
					<view class="note_item_y"></view>
					<view class="note_item_value">{{$t('register.step3.content.msg3')}}</view>
				</view>
			</view>
			<view class="but_comm_warp" @click="confirmFun">
				{{$t('common.confirm')}}
			</view>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import Header from '@/components/header_comm2.vue';
	import CryptoJS from 'crypto-js';
	import { setTradePassword } from '@/api/auth.js';
	
	export default {
		components:{Header},
		data() {
			return {
				form:{
					password:null,
					password2:null,
				},
				inputCss:{
					"height":'80rpx',
					"background": "#F3F3F3FF",
					"border-radius": "20rpx",
					"border": "0rpx",
					"padding-left": "16px",
				},
				passwordIsShow:false,
				password2IsShow:false,
			};
		},
		methods: {
			async confirmFun(){
				const form = this.form;
				if(!form.password){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('mine.pwd.new.placeholder'),
					});
					return;
				}
				if(!form.password2){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('mine.pwd.new2.placeholder'),
					});
					return;
				}
				if(form.password.trim() !== form.password2.trim()){
					this.$refs.uToastRef.show({
						type: 'error',
						message: this.$t('mine.pwd.different.placeholder'),
					});
					return;
				}
				const params={
					password:CryptoJS.MD5(form.password).toString(),
				}
				const response = await setTradePassword(params);
				if(response && response.bizcode === 100){
					this.$refs.uToastRef.show({
						type: 'success',
						message: response.msg,
					});
					setTimeout(()=>{
						uni.redirectTo({
							url: '/pages/safety_center/safety_center'
						})
					},1500)
				}
			}
		}
	}
</script>

<style lang="scss">
.transaction_password{
	height: calc(100vh - 0rpx);
	height: calc(100vh - 0rpx);
	.login_password_content_warp{
		padding: 30rpx;
	}
	
	.note_warp{
		margin-top: 50rpx;
		.note_item{
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			.note_item_y{
				width: 8rpx;
				height: 8rpx;
				background: #000000;
				border-radius: 50%;
			}
			.note_item_value{
				font-size: 26rpx;
				color: #333333;
				margin-left: 10rpx;
			}
		}
	}
	.but_comm_warp{
		margin-top: 100rpx;
	}
}
</style>
